<template>
<div>

  <!--    时间选择器-->
  <div style="float: left;margin-bottom: 20px">
    <el-time-select
      v-model="value"
      :picker-options="{
    start: '00:00',
    step: '00:01',
    end: '00:60'
  }"
      placeholder="选择时间">
    </el-time-select>

    <el-button type="primary" @click="search">查询</el-button>
  </div>


  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="土壤温度">
            <span>{{ props.row.rtSoilTemperature }}</span>
          </el-form-item>
          <el-form-item label="土壤湿度">
            <span>{{ props.row.rtSoilMoisture }}</span>
          </el-form-item>
          <el-form-item label="电导率">
            <span>{{ props.row.rtConductivity }}</span>
          </el-form-item>
          <el-form-item label="土壤PH">
            <span>{{ props.row.rtSoilPh }}</span>
          </el-form-item>
          <el-form-item label="风向">
            <span>{{ props.row.rtWindDirection }}</span>
          </el-form-item>
          <el-form-item label="风速">
            <span>{{ props.row.rtWindSpeed }}</span>
          </el-form-item>
          <el-form-item label="大气温度">
            <span>{{ props.row.rtAtmosphericTemperature }}</span>
          </el-form-item>
          <el-form-item label="大气湿度">
            <span>{{ props.row.rtAtmosphericHumidity }}</span>
          </el-form-item>
          <el-form-item label="降雨量">
            <span>{{ props.row.rtRainfall }}</span>
          </el-form-item>
          <el-form-item label="大气压力">
            <span>{{ props.row.rtAtmosphericPressure }}</span>
          </el-form-item>
          <el-form-item label="PM2.5">
            <span>{{ props.row.rtPm2 }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="土壤温度"
      prop="rtSoilTemperature">
    </el-table-column>
    <el-table-column
      label="土壤湿度"
      prop="rtSoilMoisture">
    </el-table-column>
    <el-table-column
      label="土壤PH"
      prop="rtSoilPh">
    </el-table-column>
    <el-table-column
      label="电导率"
      prop="rtConductivity">
    </el-table-column>
  </el-table>

  <div class="block" style="float: right">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 5, 9, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Total">
    </el-pagination>
  </div>

</div>

</template>

<script>
import axios from "axios";
export default {
  name: "rsoilList",
  data() {
    return {
      tableData: [{
        rtId: '',
        rtSoilTemperature: '',
        rtSoilMoisture: '',
        rtConductivity: '',
        rtSoilPh: '',
        rtWindDirection: '',
        rtWindSpeed: '',
        rtAtmosphericTemperature: '',
        rtAtmosphericHumidity:'',
        rtRainfall:'',
        rtAtmosphericPressure:'',
        rtPm2:'',
        rtPm10:'',
        rtEvaporationCapacity:'',
        rtMinute:''
      }],
      pageSize: 1,
      currentPage: 1,
      Total: 0,
      value: ''
    }
  },
  methods: {
    PageSelect(){
      axios.get(`/api/param/show?currentPage=${this.currentPage}&pageSize=${this.pageSize}`)
        .then(({data}) => {
          if (data.message=='查询成功')
          {
            this.tableData=data.data.records
            this.Total=data.data.total
            // this.$message({
            //   message: data.message,
            //   type: "success"
            // })
          }
          else {
            this.$message({
              message: data.message,
              type: "warning"
            })
            this.PageSelect();
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    handleSizeChange(val) {
      this.pageSize=val
      console.log(`每页 ${val} 条`);
      this.PageSelect();
    },
    handleCurrentChange(val) {
      this.currentPage=val
      console.log(`当前页: ${val}`);
      this.PageSelect();
    },
    search(){
      this.currentPage=parseInt(this.value.slice(4,6))+1
      console.log(this.value.slice(4,6))
      this.PageSelect();
    }
  },
  created() {
    this.PageSelect();
  }
}
</script>

<style scoped>

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

</style>
